<template>
  <data-card title="后台菜单">
    <template #right>
      <el-space>
        <el-button size="small" type="primary" @click="CreatedMenu(0)">
          添加
        </el-button>
        <el-button size="small" type="warning" :loading="loading" @click="getAdministerMenu">
          {{ loading ? '加载中' : '刷新' }}
        </el-button>
      </el-space>
    </template>
    <el-table class="app-margin-top-interval" height="calc( 100vh - 195px)" :data="data" empty-text="尚未添加菜单" border v-loading="loading" element-loading-text="玩命加载中" row-key="id">
      <el-table-column prop="id" width="110" label="ID" fixed="left" show-overflow-tooltip/>
      <el-table-column prop="name" min-width="150" fixed="left" label="名称" show-overflow-tooltip/>
      <el-table-column align="center" width="130" fixed="left" label="操作" show-overflow-tooltip>
        <template #default="{ row }">
          <el-space>
            <operate-link @tap="CreatedMenu(row.id)">
              添加
            </operate-link>
            <operate-link @tap="UpdatedMenu(row.id)">
              编辑
            </operate-link>
            <operate-link @tap="RemoveMenu(row.id)" confirm="删除菜单会同时删除下级菜单且不可恢复,确定要删除吗?">
              删除
            </operate-link>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column prop="icon" min-width="110" label="图标" show-overflow-tooltip>
        <template #default="{ row }">
          <app-icon size="16px" :color="row.node.length>0?'var(--el-color-primary)':''" :name="row.icon"></app-icon>
        </template>
      </el-table-column>
      <el-table-column min-width="180" prop="path" label="路由" show-overflow-tooltip/>
      <el-table-column min-width="120" prop="sort" label="排序" show-overflow-tooltip/>
      <el-table-column min-width="120" prop="is_nav" label="显示" show-overflow-tooltip>
        <template #default="{ row }">
          <app-switch :model-value="row.is_nav" @change="changeIsNav($event,[row.id])"></app-switch>
        </template>
      </el-table-column>
      <el-table-column min-width="170" prop="created_at" label="创建时间" show-overflow-tooltip>
        <template #default="{ row }">
          <show-time :time="row.created_at"></show-time>
        </template>
      </el-table-column>
    </el-table>
  </data-card>
</template>
<script setup lang="ts">
import {ref, onBeforeMount} from "vue";
import {getAdministerMenuApi, changeStatusApi, CreatedMenuApi, UpdatedMenuApi, RemoveMenuApi} from "@/apps/admin/api/administer/menu";
import {Ref, UnwrapRef} from "@vue/reactivity";
import {usePopupForm} from "@/components/FunctionComponents";
import {ElMessage} from "element-plus";

/**
 * 加载状态
 */
const loading = ref(false)


/**
 * 菜单数据
 */
const data: Ref<UnwrapRef<any>> = ref([])


/**
 * 获取后台菜单
 */
async function getAdministerMenu() {
  loading.value = true
  const result = await getAdministerMenuApi()
  if (result.code === 200) {
    data.value = result.data
  }
  loading.value = false
}

/**
 * 修改菜单状态
 */
function changeIsNav(value: 0 | 1, id: Array<number>) {
  changeStatusApi(id, value).then(result => {
    if (result.code === 200) {
      getAdministerMenu()
    }
  })
}


/**
 * 创建菜单
 * @constructor
 */
const CreatedMenu = (id: number) => usePopupForm({api: CreatedMenuApi, query: {pid: id}, onSuccess: getAdministerMenu})


/**
 * 编辑菜单
 * @param id
 * @constructor
 */
const UpdatedMenu = (id: number) => usePopupForm({api: UpdatedMenuApi, query: {id: id}, onSuccess: getAdministerMenu})


/**
 * 删除菜单
 * @param id
 * @constructor
 */
function RemoveMenu(id: number) {
  RemoveMenuApi(id).then(result => {
    if (result.code === 200) {
      ElMessage.success(result.msg)
      getAdministerMenu()
    }
  })
}

onBeforeMount(getAdministerMenu)
</script>
